'use client';

import { useEffect } from 'react';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { AnimatedButton } from '@/components/ui/micro-interactions';
import {
  RefreshCw,
  Home,
  AlertTriangle,
  Bug,
  Mail,
  ArrowLeft,
} from 'lucide-react';

interface ErrorProps {
  error: Error & { digest?: string };
  reset: () => void;
}

/**
 * 全局错误页面
 * 处理应用程序中的未捕获错误
 */
export default function Error({ error, reset }: ErrorProps) {
  useEffect(() => {
    // 记录错误到监控服务
    console.error('Application error:', error);

    // 这里可以集成错误监控服务，如 Sentry
    // Sentry.captureException(error)
  }, [error]);

  const handleRefresh = () => {
    // 重置错误状态并重新渲染
    reset();
  };

  const handleReload = () => {
    // 刷新整个页面
    window.location.reload();
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-red-50 via-white to-orange-50 dark:from-gray-900 dark:via-gray-800 dark:to-red-900 flex items-center justify-center px-4">
      <div className="max-w-2xl mx-auto text-center">
        {/* 500动画图标 */}
        <div className="relative mb-8">
          <div className="text-8xl md:text-9xl font-bold text-gray-200 dark:text-gray-700 select-none">
            500
          </div>

          {/* 装饰性元素 */}
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
            <div className="relative">
              <AlertTriangle className="w-16 h-16 text-red-500 animate-pulse" />
              <div className="absolute -top-1 -right-1 w-4 h-4 bg-orange-500 rounded-full animate-ping" />
            </div>
          </div>

          {/* 故障效果 */}
          <div className="absolute inset-0 overflow-hidden pointer-events-none">
            {Array.from({ length: 8 }).map((_, i) => (
              <div
                key={i}
                className="absolute w-1 h-1 bg-red-400 rounded-full animate-bounce opacity-70"
                style={{
                  left: `${15 + Math.random() * 70}%`,
                  top: `${15 + Math.random() * 70}%`,
                  animationDelay: `${Math.random() * 1.5}s`,
                  animationDuration: `${1 + Math.random() * 1.5}s`,
                }}
              />
            ))}
          </div>
        </div>

        {/* 错误信息 */}
        <div className="mb-8">
          <h1 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4">
            服务器内部错误
          </h1>
          <p className="text-lg text-gray-600 dark:text-gray-400 mb-2">
            抱歉，服务器遇到了一个意外错误
          </p>
          <p className="text-sm text-gray-500 dark:text-gray-500">
            我们的技术团队已经收到通知，正在紧急修复中
          </p>
        </div>

        {/* 错误详情（开发环境） */}
        {process.env.NODE_ENV === 'development' && (
          <div className="mb-8 p-4 bg-red-50 dark:bg-red-950 border border-red-200 dark:border-red-800 rounded-lg text-left">
            <h3 className="text-sm font-semibold text-red-800 dark:text-red-200 mb-2 flex items-center">
              <Bug className="w-4 h-4 mr-2" />
              开发调试信息
            </h3>
            <div className="text-xs font-mono text-red-700 dark:text-red-300 bg-red-100 dark:bg-red-900 p-3 rounded border overflow-auto max-h-32">
              <div className="font-semibold mb-1">错误消息:</div>
              <div className="mb-2">{error.message}</div>
              {error.digest && (
                <>
                  <div className="font-semibold mb-1">错误ID:</div>
                  <div>{error.digest}</div>
                </>
              )}
            </div>
          </div>
        )}

        {/* 操作按钮 */}
        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-8">
          <AnimatedButton
            variant="glow"
            className="px-6 py-3"
            onClick={handleRefresh}
          >
            <RefreshCw className="w-4 h-4 mr-2" />
            重试
          </AnimatedButton>

          <AnimatedButton
            variant="magnetic"
            className="px-6 py-3 border border-gray-300 dark:border-gray-600"
            onClick={handleReload}
          >
            <RefreshCw className="w-4 h-4 mr-2" />
            刷新页面
          </AnimatedButton>

          <Button variant="ghost" asChild>
            <Link href="/">
              <Home className="w-4 h-4 mr-2" />
              返回首页
            </Link>
          </Button>
        </div>

        {/* 帮助信息 */}
        <div className="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-lg border border-gray-200 dark:border-gray-700">
          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
            需要帮助？
          </h3>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
            <div className="text-center p-4 rounded-lg bg-gray-50 dark:bg-gray-700">
              <RefreshCw className="w-8 h-8 text-blue-500 mx-auto mb-2" />
              <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-1">
                刷新重试
              </h4>
              <p className="text-sm text-gray-600 dark:text-gray-400">
                大多数临时错误可以通过刷新解决
              </p>
            </div>

            <div className="text-center p-4 rounded-lg bg-gray-50 dark:bg-gray-700">
              <Home className="w-8 h-8 text-green-500 mx-auto mb-2" />
              <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-1">
                返回首页
              </h4>
              <p className="text-sm text-gray-600 dark:text-gray-400">
                从首页重新开始浏览
              </p>
            </div>

            <div className="text-center p-4 rounded-lg bg-gray-50 dark:bg-gray-700">
              <Mail className="w-8 h-8 text-purple-500 mx-auto mb-2" />
              <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-1">
                联系支持
              </h4>
              <p className="text-sm text-gray-600 dark:text-gray-400">
                如果问题持续存在，请联系我们
              </p>
            </div>
          </div>

          <div className="flex flex-col sm:flex-row gap-3 justify-center">
            <Button variant="outline" asChild>
              <Link href="/docs">查看文档</Link>
            </Button>

            <Button variant="outline" asChild>
              <Link href="/community">社区支持</Link>
            </Button>

            <Button variant="outline" asChild>
              <a href="mailto:support@cactor.dev">
                <Mail className="w-4 h-4 mr-2" />
                技术支持
              </a>
            </Button>
          </div>
        </div>

        {/* 状态信息 */}
        <div className="mt-8 p-4 bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800 rounded-lg">
          <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-2">
            系统状态
          </h4>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
            <div className="flex items-center justify-between">
              <span className="text-blue-700 dark:text-blue-300">API服务</span>
              <div className="flex items-center">
                <div className="w-2 h-2 bg-green-500 rounded-full mr-2 animate-pulse" />
                <span className="text-green-600 dark:text-green-400">正常</span>
              </div>
            </div>

            <div className="flex items-center justify-between">
              <span className="text-blue-700 dark:text-blue-300">数据库</span>
              <div className="flex items-center">
                <div className="w-2 h-2 bg-yellow-500 rounded-full mr-2 animate-pulse" />
                <span className="text-yellow-600 dark:text-yellow-400">
                  检查中
                </span>
              </div>
            </div>

            <div className="flex items-center justify-between">
              <span className="text-blue-700 dark:text-blue-300">CDN</span>
              <div className="flex items-center">
                <div className="w-2 h-2 bg-green-500 rounded-full mr-2 animate-pulse" />
                <span className="text-green-600 dark:text-green-400">正常</span>
              </div>
            </div>
          </div>
        </div>

        {/* 底部信息 */}
        <div className="mt-8 text-sm text-gray-500 dark:text-gray-400">
          <p>错误已自动报告给我们的监控系统</p>
          <p className="mt-1">
            错误代码: 500 | 服务器内部错误
            {error.digest && ` | ID: ${error.digest.slice(0, 8)}`}
          </p>
          <p className="mt-1">时间: {new Date().toLocaleString('zh-CN')}</p>
        </div>
      </div>
    </div>
  );
}
